<template>
  <view class="root">
    <view class="status-wrapper">
      <image class="i-img" :src="baseImgUrl + 'feedback-start.png'" mode="" v-if="detail.status == 0"></image>
      <image class="i-img" :src="baseImgUrl + 'feedback-ing.png'" mode="" v-if="detail.status == 1"></image>
      <image class="i-img" :src="baseImgUrl + 'feedback-done.png'" mode="" v-if="detail.status == 2"></image>
      <template v-if="detail.status == 0">
        <view class="state-text">
          已收到
        </view>
        <view class="tips-text">
          感谢您的反馈，我们会立即处理并尽快解决您的问题。
          欢迎继续提出建议
        </view>
      </template>
      <template v-if="detail.status == 1">
        <view class="state-text">
          跟进中
        </view>
        <view class="tips-text">
          您提出的反馈意见我们正在积极跟进中，
          感谢您的耐心等待。
        </view>
      </template>
      <template v-if="detail.status == 2">
        <view class="state-text">
          已处理
        </view>
        <view class="tips-text">
          问题已在新版中修复，请更新体验。如有其他问题，欢迎联系。
        </view>
      </template>
    </view>
    <view class="container-wrapper process-wrapper">
      <view class="info-title">
        处理进度
      </view>
      <view class="btn-style">
        <view class="c-item" v-if="detail.status >= 0">
          <view class="solid-style">
          </view>
          <view class="b-item">
          </view>
          <view class="style-b">
            <view class="b-time"> 发起反馈</view>
            <view class="b-address">{{detail.createTime}}</view>
          </view>
        </view>
        <view class="c-item" v-if="detail.status >=1">
          <view class="solid-style">
          </view>
          <view class="b-item">
          </view>
          <view class="style-b">
            <view class="b-time"> 跟进中</view>
            <view class="b-address">{{detail.followUpTime}}</view>
          </view>
        </view>
        <view class="c-item" v-if="detail.status >= 2">
          <view class="solid-style">
          </view>
          <view class="b-item">
          </view>
          <view class="style-b">
            <view class="b-time"> 已处理</view>
            <view class="b-address">{{detail.handleTime}}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="container-wrapper">
      <view class="info-title">
        问题描述
      </view>
      <view class="question-wrapper">
        <view class="item">
          <view class="label-i">问题类型:</view>
          <view class="label-v">{{problemTypeEnum[detail.problemType] || '暂无'}}</view>
        </view>
        <view class="item">
          <view class="label-i">问题描述:</view>
          <view class="label-v">{{detail.content}}</view>
        </view>
        <view class="item">
          <view class="label-i">图片凭证:</view>
          <view class="label-v" v-if="detail.pathList && detail.pathList.length">
            <image mode="aspectFill" class="img-voucher" v-for="item in detail.pathList" :key="item" :src="imgPrefix+
              item"></image>
          </view>
          <view class="label-v" v-else>
            暂无
          </view>
        </view>
        <view class="item">
          <view class="label-i">联系方式:</view>
          <view class="label-v">{{detail.mobile || '暂无'}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    feedbackDetail
  } from '../api/api';
  import {
    getOptionsParams,
    isLoading,
    problemTypeEnum
  } from '../utils/util';

  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        imgPrefix: uni.getStorageSync('imgPrefix'),
        routerParams: {},
        detail: {},
        problemTypeEnum
      }
    },
    onLoad(options) {
      this.routerParams = getOptionsParams(options)
      this.initPage()
    },
    methods: {
      initPage() {
        const params = {
          id: this.routerParams.id
        }
        isLoading(true)
        feedbackDetail(params)
          .then((res) => {
            this.detail = res.result
          })
          .finally(() => {
            isLoading(false)
          })
      }
    }
  }
</script>

<style>
  page {
    background: #F9F9F9;
  }
</style>
<style lang="scss" scoped>
  .root {
    padding: 16rpx;

    .status-wrapper {
      padding: 58rpx 107rpx 64rpx 107rpx;
      text-align: center;
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      margin-bottom: 10rpx;

      .i-img {
        width: 96rpx;
        height: 96rpx;
      }

      .state-text {
        font-weight: bold;
        font-size: 30rpx;
        color: #181818;
        margin-top: 18rpx;
        margin-bottom: 47rpx;
      }

      .tips-text {
        font-weight: 400;
        font-size: 28rpx;
        color: #AAAAAA;
      }
    }


    .container-wrapper {
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 0 23rpx 57rpx 23rpx;
      margin-bottom: 10rpx;

      .info-title {
        padding: 33rpx 0rpx;
        border-bottom: 1px solid #f2f2f2;
        font-weight: bold;
        font-size: 32rpx;
        color: #181818;
      }

      .question-wrapper {
        padding-top: 20rpx;

        .item {
          display: flex;
          margin-bottom: 23rpx;

          .label-i {
            font-weight: 500;
            font-size: 28rpx;
            color: #7F7E83;
            width: 129rpx;
            flex-shrink: 0;
            margin-right: 16rpx;
          }

          .label-v {
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
            display: flex;
            gap: 20rpx;
            flex-wrap: wrap;

            .img-voucher {
              width: 235rpx;
              height: 162rpx;
              box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
              border-radius: 0rpx 0rpx 0rpx 0rpx;
              border: 1rpx solid #E5E5E5;
            }
          }
        }
      }
    }

    .process-wrapper {
      .btn-style {
        max-height: 400px;
        overflow: auto;
        margin-top: 42rpx;

        .c-item {
          display: flex;
          padding-bottom: 43rpx;
          position: relative;

          &:last-child {
            .solid-style {
              display: none;
            }
          }

          .b-item {
            width: 16rpx;
            height: 16rpx;
            background: #2488F5;
            border-radius: 50%;
            flex-shrink: 0;
            margin-right: 12rpx;
            position: relative;
            z-index: 10;
          }

          .solid-style {
            content: '';
            position: absolute;
            left: 8rpx;
            width: 0px;
            // background: #dddddd;
            height: 100%;
            z-index: 1;
            border-left: 1px dashed #4a9df7;

          }

          .b-time {
            font-weight: bold;
            font-size: 26rpx;
            color: #333333;
            margin-bottom: 23rpx;
          }

          .b-address {
            font-weight: 400;
            font-size: 26rpx;
            color: #AEAEAE;
          }
        }
      }
    }
  }
</style>